<template>
  <div class="fixed">
    <div class="clode" @click="close">
      <van-icon name="cross" />
    </div>
    <div class="content" id="share-yellow" ref="addImage" v-if="!dataURL">
      <img src="../../assets/img/logo2.png" style="width: 0.6rem; height: 0.6rem; position: absolute;top: 0.2rem; left: 0.2rem;" alt="">
      <span style="font-size: 0.28rem;  position: absolute;top: 0.3rem; left: 1rem;color: white;font-family: 'bodoni mt';">巨服中国</span>
      <div id="imgbox" :style="{backgroundImage:`url(${detail.logoUrl})`}">
      </div>
      <p class="goodName">{{detail.entName}}</p>
      <div id="text">
        <div :src="ewm" class="ewm" alt="" id="ewm"></div>
        <img class="share-tip-img" src="../../assets/img/share_bg.png" alt="">
        <div class="share-user">
          <div class="share-user-head" :style="{backgroundImage:`url(${me.avatarFile.uriPath})`}"></div>
          <p class="share-user-name">{{me.nickName}}</p>
        </div>
      </div>
    </div>
    <img class="result" :src="dataURL" alt="">
    <div id="codeJoin"></div>
    <p class="tips">提示:长按图片保存到本地相册</p>
    <div class="loading" v-if="!dataURL">
      <van-loading size="24px" vertical>生成中...</van-loading>
    </div>
  </div>
</template>

<script>
import api from "../../api/api.js"
import html2canvas from 'html2canvas'
import { QRCode } from 'utils/qrcode'
export default {
  data () {
    return {
      dataURL: '',
      firstFlag: true,
      my: '',
      ewm: '',
      ShareCode: '',
      money: '',
      me: {
        avatarFile: { uriPath: '' }
      }
    }
  },
  props: ['detail'],
  created () {
    this.getData()
    this.getMe()
  },
  mounted () {

  },
  methods: {
    close () {
      this.$emit('close')
    },
    getMe () {
      api.myIndex().then(res => {
        this.me = res.data
      })
    },
    clickGeneratePicture () {
      setTimeout(() => {
        const opts = {
          y: window.scrollY,
          backgroundColor: 'transparent',
          useCORS: true, // 允许跨域
          allowTaint: false
        };
        html2canvas(this.$refs.addImage, opts).then(canvas => {
          let dataURL = canvas.toDataURL("image/png");
          this.dataURL = dataURL;
          if (this.dataURL !== "") {
          }
        });
        this.$toast('海报已生成')
      }, 1000)
    },
    getData () {
      api.getShareQR().then(res => {
        this.$nextTick(() => {
          var qrHtml = document.getElementById('ewm')
          console.log(qrHtml)
          var qr = new QRCode("codeJoin", {
            text: window.location.href + '?share=' + res.data.ShareCode,
            width: 128,
            height: 128,
            colorDark: "#000000",
            colorLight: "#ffffff",
          });
          qrHtml.appendChild(qr._el.childNodes[1])
          document.getElementById('codeJoin').innerHTML = ''
          this.clickGeneratePicture()
        })
      })
    }
  }
}
</script>

<style lang="scss">
.fixed {
  background-color: rgba($color: #fff, $alpha: 1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  .loading {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    z-index: 99;
  }
  .button {
    width: 85%;
    height: 0.9rem;
    background: linear-gradient(
      96deg,
      rgba(72, 143, 240, 1),
      rgba(51, 130, 239, 1)
    );
    border-radius: 0.15rem;
    font-size: 0.35rem;
    line-height: 0.9rem;
    text-align: center;
    margin: 0 auto;
    color: #fefefe;
    margin-top: 0.8rem;
  }
  #codeJoin {
    width: 0;
    height: 0;
    overflow: hidden;
  }
  .namess {
    font-size: 0.3rem;
    color: #999999;
    clear: both;
    display: inline-block;
    float: right;
    padding-right: 0.5rem;
    margin-top: -0.5rem;
  }

  .clode {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    font-size: 0.46rem;
    color: #000;
  }
  #share-yellow {
    width: 6.5rem;
    -moz-box-shadow: 2px 2px 5px #cccccc;
    -webkit-box-shadow: 2px 2px 5px #cccccc;
    box-shadow: 2px 2px 5px #cccccc;
    margin: 0 auto;
    border-radius: 0.2rem;
    background-color: #fff;
    position: relative;
    #imgbox {
      height: 4rem;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      img {
        width: 100%;
      }
    }
    .goodName {
      color: #111111;
      font-size: 0.35rem;
      padding: 0.2rem;
      text-align: left;
    }
    #text {
      background: white;
      overflow: hidden;
      display: flex;
      align-items: center;
      padding: 0.2rem;
      .share-tip-img {
        width: 3rem;
        flex: none;
        margin: 0 0.2rem;
      }
      .ewm {
        width: 1.2rem;
        height: 1.2rem;
        flex: none;
        img {
          width: 100%;
        }
      }
      .share-user {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 1.4rem;
        flex: none;
        .share-user-head {
          width: 0.67rem;
          height: 0.67rem;
          border-radius: 50%;
          background-size: cover;
        }
        .share-user-name {
          text-align: center;
          font-size: 0.24rem;
          color: #999;
        }
      }
    }
  }
  .result {
    width: 7.5rem;
    margin: 0 auto;
    margin-top: 1rem;
    box-shadow: #f5f5f5 2px 2px 5px;
  }
  .tips {
    color: #000;
    font-size: 0.32rem;
    margin-top: 0.5rem;
  }
}
</style>
